<template>
  <ul>
    <li v-for="item in routerList" :key="item.name" @click.stop="scrollToAnchor(item)">
      <px-text truncated :style="getDetph" :class="{ 'router-active': item.name === routerActive }">{{ item.name }}</px-text>
      <WidgetRouterItem
        v-if="item.children"
        :detph="detph !== 0 && !detph ? 1 : detph + 1"
        :router-list="item.children"
        :routerActive="routerActive"
        @scrollToAnchor="scrollToAnchor"
      />
    </li>
  </ul>
</template>
<script setup lang="ts">
import { computed } from "vue";
defineOptions({
  name: "WidgetRouterItem"
});

type ListItemb = { ref: any; name: string; children?: ListItemb[] };
const emits = defineEmits(["scrollToAnchor"]);
const props = defineProps<{ routerActive: string; routerList: ListItemb[]; detph?: number | null }>();

const scrollToAnchor = item => {
  emits("scrollToAnchor", item);
};
const getDetph = computed(() => {
  if (props.detph !== 0 && !props.detph) {
    return `padding-left:${12}px`;
  }
  return `padding-left:${12 + props.detph * 12}px`;
});
</script>
<style lang="scss" scoped>
ul {
  width: 100%;
  height: auto;

  li {
    height: auto;
    font-size: 12px;
    font-weight: 600;
    line-height: auto;
    cursor: pointer;

    > span {
      display: inline-block;
      height: 20px;
      padding-left: 12px;
      line-height: 20px;
      box-shadow: inset 1px 0 0 0 #e6e6e6;
    }

    > span:hover {
      color: #3b82f6;
      box-shadow: inset 3px 0 0 0 #3b82f6;
    }

    .router-active {
      color: #3b82f6;
      box-shadow: inset 3px 0 0 0 #3b82f6;
    }
  }
}
</style>
